/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
 	vertical-align: baseline;
	text-decoration: none
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-size: 0.9em  ;
    }
ol , ul {
		list-style: none     ;

}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* einde toegevoegde reset
 http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/



* {
    box-sizing: border-box;
}
 /*alles met padding en margin meegerekend in formaat  */

 html {
  height: 100%;
}


body {
      height: 100%;
      min-height: 100vh;
      width: 100vw;
    background-image: url(../achtergrond_wilgenrij_vergroot.jpg);
      background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Optioneel: zorgt dat de afbeelding stilstaat tijdens het scrollen */
  background-repeat: no-repeat;
  margin: 0;
        /*background-size: 500px;*/

  color: #000000;

     font-family: Verdana, Geneva, sans-serif;
     text-align: left;
/* overflow:  hidden; */
 }


 sub {
     font-size: 60%;
     vertical-align: sub
     }


body {
     font-size:        0.9em    ;
 line-height: 1.3em;
}


h1 {
font-size:        1.4em ;

 padding-bottom: 0.5em;
}

h2 {
font-size:        1.2em    ;
padding-top: 0.5em;
 padding-bottom: 0.5em;
}

h3 {
font-size:        1.1em    ;
padding-top: 0.5em;
 padding-bottom: 0.5em;


 }

h1 , h2 , h3 {
   color: #4C4C4C;
    font-weight: 300    ;
}


.knop {
    color: #944024;
    border: 2px solid darkgrey ;
    border-radius: 3px   ;
 }

 .stem {;
/* font-style: italic; */
 text-decoration: underline;
 }

#inhoud  {

 width: 90%;
max-width: 50em;

background: rgba(253, 248, 247, 1);

border: solid;
border-color: #7D9C80;


margin-top: 3em;
margin-left: auto;
margin-right: auto;

padding-top: 2em ;
padding-left: 2em;
padding-bottom: 2em;
padding-right: 2em;


text-align:     left;
border-width: 1px;
border-radius: 10px    ;

}


.afbeelding
{
    width: 100%   ;
/*    border: solid;
border-color:#4E464E  ;
border-width: 3px    ;*/
text-align: center  ;
font-size:  smaller  ;
font-style: italic    ;

}

img {
    width: 100%         ;

}



.links {
    display: block;
       margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;    }

.rechts {
    display: block;
       margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
    }

 @media (max-width: 767px) and ( (orientation: landscape))       {

#inhoud  {

 width: 70%;
max-width: 50em;

}



.afbeelding
{
    width: 50%   ;
/*    border: solid;
border-color:#4E464E  ;
border-width: 3px    ;*/

text-align: center  ;
font-size:  smaller  ;
font-style: italic    ;

}

  img {
    width: 100%         ;

}
    }

@media (min-width: 768px)        {

body {
     font-size:        1.2em    ;
 line-height: 1.6em;
}


h1 {
font-size:        1.6em ;

 padding-bottom: 0.75em;
}

h2 {
font-size:        1.4em    ;
padding-top: 0.75em;
 padding-bottom: 0.75em;
}

h3 {
font-size:        1.3em    ;
padding-top: 0.75em;
 padding-bottom: 0.75em;


 }

h1 , h2 , h3 {
   color: #4C4C4C;
    font-weight: 300    ;
}

}



@media screen and (orientation: landscape) and (min-width: 768px)   {

#inhoud  {

 width: 60vw;
     max-width: 50em;

background: rgba(253, 248, 247, 1);

/*border: solid;
border-color: #14F52A;*/


margin-top: 3em;
margin-left: auto;
margin-right: auto;

padding-top: 2em ;
padding-left: 2em;
padding-bottom: 2em;
padding-right: 2em;


text-align:     left;

}

.afbeelding
{
    width: 50%         ;


text-align: center  ;
font-size:  smaller  ;
font-style: italic    ;

}

img {
    width: 100%         ;
        border: solid;
border-color:#4E464E  ;
border-width: 1px    ;
}

}

.links {
        float: left         ;
        padding-left: 0em;
        padding-right: 1.5em;
        margin-top: 0em;
        margin-bottom: 0em;
}

.rechts {
        float: right         ;
        padding-left: 1.5em;
        padding-right: 1.5em;
}


}


@media screen and (orientation: portrait) and (min-width: 768px) {

  #inhoud  {

     width: 90vw;
/*max-width: 30em; */
     /*   min-width: 40em;   */
/*            overflow-y: auto;
            overflow-x: hidden ;*/
background: rgba(253, 248, 247, 1);

margin-top: 5em;
margin-left: auto;
margin-right: auto;



padding-top: 1em ;
padding-left: 2em;
padding-bottom: 2em;
padding-right: 2em;

text-align:     left;

}

img {
    width: 50%         ;
        border-width: 0px    ;

}

.links {
        float: left         ;
        padding-left: 0em;
        padding-right: 1.5em;
               margin-top: 0em;
        margin-bottom: 0em;
}

.rechts {
        float: right         ;
        padding-left: 1.5em;
        padding-right: 1.5em;
               margin-top: 0em;
        margin-bottom: 0em;
}
    }